<template>
  <div
    class="list-item"
    :class="{ selected, unread: !mail.is_read }"
    @click="$emit('goDetail', mail.id)"
  >
    <input
      type="checkbox"
      :checked="selected"
      @change.stop="$emit('toggle', mail.id)"
      @click.stop
      class="big-checkbox"
    />
    <span class="subject">{{ mail.subject }}</span>
    <span class="sender">{{ mail.sender }}</span>
    <span class="date">{{ mail.received_at }}</span>
    <span class="status">
      <span :class="mail.is_read ? 'read' : 'unread'">{{ mail.is_read ? '已读' : '未读' }}</span>
    </span>
  </div>
</template>
<script setup lang="ts">
defineProps<{
  mail: any
  selected: boolean
}>()
</script>
<style scoped>
.list-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.list-item.selected { background: #e6f7ff; }
.list-item.unread .subject { font-weight: bold; color: #d73030; }
.subject { display: inline-block; width: 320px; padding-right: 12px; }
.sender { display: inline-block; width: 300px; padding-right: 12px; }
.date { display: inline-block; width: 300px; padding-right: 12px; }
.status { display: inline-block; width: 300px; }
.read { color: #67c23a; }
.unread { color: #f56c6c; }
.list-item:hover {
  background: #f9e9e7;
  cursor: pointer;
}
.big-checkbox {
  width: 22px;
  height: 22px;
  accent-color: #409eff;
  margin-right: 18px;
  cursor: pointer;
}
</style>
